<template>
        <section class="loginContainer">
            <div class="loginInner">
                <div class="login_header">
                    <h2 class="login_logo">外卖</h2>
                    <div class="login_header_title">
                        <a href="javascript:;" v-bind:class={on:isShow} v-on:click="show('msg')">短信登录</a>
                        <a href="javascript:;" v-bind:class={on:!isShow} v-on:click="show('keyword')">密码登录</a>
                    </div>
                </div>
                <div class="login_content">
                    <form @submit.prevent="login">
                        <div v-bind:class={on:isShow}>
                            <section class="login_message">
                                <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
                                <button :disabled="!isRightPhone" class="get_verification" type="button"
                                        :class="{right_phone_number:isRightPhone}" @click="sendCode">{{daojishi}}</button>
                            </section>
                            <section class="login_verification">
                                <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
                            </section>
                            <section class="login_hint">
                                温馨提示：未注册帐号的手机号，登录时将自动注册，且代表已同意
                                <a href="javascript:;">《用户服务协议》</a>
                            </section>
                        </div>
                        <div v-bind:class={on:!isShow}>
                            <section>
                                <section class="login_message">
                                    <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
                                </section>
                                <section class="login_verification">
                                    <input :type="isShowPas?'text':'password'" maxlength="8" placeholder="密码" v-model="pwd">
                                    <div :class="{switch_button:true,off:!isShowPas,on:isShowPas}" @click="isShowPas=!isShowPas">
                                        <div :class="{switch_circle:true,right:isShowPas}"></div>
                                        <span class="switch_text">{{isShowPas?'...':''}}</span>
                                    </div>
                                </section>
                                <section class="login_message">
                                    <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                                    <img class="get_verification" src="http://localhost:4000/captcha" alt="captcha" @click="reqCaptcha" ref="captcha">
                                </section>
                            </section>
                        </div>
                        <button class="login_submit">登录</button>
                    </form>
                    <a href="javascript:;" class="about_us">关于我们</a>
                </div>
                <a href="javascript:" class="go_back" @click="$router.back()">
                    <i class="iconfont icon-jiantou2"></i>
                </a>
            </div>
        </section>
</template>

<script>
    import { Toast } from 'mint-ui';
    import {reqSendcode,reqSmsLogin,reqPwdLogin,reqUserInfo} from '../../api/index'
    export default {
        name: "Login",
        data(){
            return{
                isShow:true,
                phone:'',
                isShowPas:false,//密码是否可见
                daojishi:'获取验证码',
                code:'',//短信验证码
                name:'',//手机号、用户名
                captcha:'',//图形验证码
                pwd:'',//密码
            }
        },
        methods:{
            show(flag){
                if(flag==='msg'){
                    this.isShow=true
                }else this.isShow=false
            },
            async sendCode(){
                let daojishi=60
                let timer
                timer=setInterval(()=>{
                    daojishi--
                    this.daojishi=`已发送（${daojishi}s）`
                    if(daojishi===0){
                        this.daojishi='获取验证码'
                        clearInterval(timer)
                    }
                },1000)
                const result=await reqSendcode(this.phone)
                if(result.code===1){
                    //发送短信验证码失败
                    Toast(result.msg)
                    //停止倒计时
                    this.daojishi='获取验证码'
                    clearInterval(timer)
                }
            },
            async login(){
                let result
               if(this.isShow){
                   //短信登录
                   const {phone,code}=this
                   if(!/^\d{6}$/.test(code)){
                       //验证码格式不正确
                       Toast('请输入正确的验证码')
                   }else {
                       const {phone,code}=this
                       result = await reqSmsLogin({phone,code})
                   }
               }else {
                   //密码验证码登录
                   const {name,pwd,captcha}=this
                   if(!name){
                       Toast('用户名不能为空');
                       //用户名为空
                   }
                   else if(!pwd){
                       Toast('密码不能为空');
                       //密码为空
                   }
                   else if(!captcha){
                       Toast('验证码不能为空');
                       //验证码为空
                   }
                   result = await reqPwdLogin({name,pwd,captcha})
                   if(result.code===1){
                       //发送短信验证码失败
                       Toast(result.msg)
                        this.reqCaptcha()
                   }
               }
               if(result.code===0){
                   //登录成功，将user保存到vuex中
                   const user = result.data
                   this.$store.dispatch('getUser', user)
                   this.$cookies.set("user_token",this.$store.state.user.userInfo.token)
                   this.$store.dispatch('saveToken',user.token)
                   //跳转路由至个人中心界面
                   this.$router.push('/profile')
               }
            },
            reqCaptcha(){
                this.$refs.captcha.src='http://localhost:4000/captcha?time='+Date.now()
                //如果src不改变则不会重新发送请求，通过携带时间戳参数则可以解决
                //跨域是ajax才会跨域，src请求不存在跨域
            }

        },
        computed:{
            isRightPhone(){
                return this.daojishi=='获取验证码'?/^1\d{10}$/.test(this.phone):!/^1\d{10}$/.test(this.phone)
            },

        },
        async mounted() {
              let token = this.$cookies.get('user_token')
              if(token){
              const result = await reqUserInfo()
                  if(result.code===0){
                      await this.$store.dispatch('getUser',result.data)
                      await this.$router.push('/profile')
                  }
              }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/minix.styl"
    .loginContainer
        width 100%
        height 100%
        background #fff
        .loginInner
            padding-top 60px
            width 80%
            margin 0 auto
            .login_header
                .login_logo
                    font-size 40px
                    font-weight bold
                    color #02a774
                    text-align center
                .login_header_title
                    padding-top 40px
                    text-align center
                    >a
                        color #333
                        font-size 14px
                        padding-bottom 4px
                        &:first-child
                            margin-right 40px
                        &.on
                            color #02a774
                            font-weight 700
                            border-bottom 2px solid #02a774
            .login_content
                >form
                    >div
                        display none
                        &.on
                            display block
                        input
                            width 100%
                            height 100%
                            padding-left 10px
                            box-sizing border-box
                            border 1px solid #ddd
                            border-radius 4px
                            outline 0
                            font 400 14px Arial
                            &:focus
                                border 1px solid #02a774
                        .login_message
                            position relative
                            margin-top 16px
                            height 48px
                            font-size 14px
                            background #fff
                            .get_verification
                                position absolute
                                top 50%
                                right 10px
                                transform translateY(-50%)
                                border 0
                                color #ccc
                                font-size 14px
                                background transparent
                                &.right_phone_number
                                 color black
                        .login_verification
                            position relative
                            margin-top 16px
                            height 48px
                            font-size 14px
                            background #fff
                            .switch_button
                                font-size 12px
                                border 1px solid #ddd
                                border-radius 8px
                                transition background-color .3s,border-color .3s
                                padding 0 6px
                                width 30px
                                height 16px
                                line-height 16px
                                color #fff
                                position absolute
                                top 50%
                                right 10px
                                transform translateY(-50%)
                                &.off
                                    background #fff
                                    .switch_text
                                        float right
                                        color #ddd
                                &.on
                                    background #02a774
                                >.switch_circle
                                    //transform translateX(27px)
                                    position absolute
                                    top -1px
                                    left -1px
                                    width 16px
                                    height 16px
                                    border 1px solid #ddd
                                    border-radius 50%
                                    background #fff
                                    box-shadow 0 2px 4px 0 rgba(0,0,0,.1)
                                    transition transform .3s
                                    &.right
                                     transform translateX(15px)
                        .login_hint
                            margin-top 12px
                            color #999
                            font-size 14px
                            line-height 20px
                            >a
                                color #02a774
                    .login_submit
                        display block
                        width 100%
                        height 42px
                        margin-top 30px
                        border-radius 4px
                        background #4cd96f
                        color #fff
                        text-align center
                        font-size 16px
                        line-height 42px
                        border 0
                .about_us
                    display block
                    font-size 12px
                    margin-top 20px
                    text-align center
                    color #999
            .go_back
                position absolute
                top 5px
                left 5px
                width 30px
                height 30px
                >.iconfont
                    font-size 20px
                    color #999
</style>